<template>
  <div class="main">
    <span class="s4">学员列表</span>
    <el-table
      ref="multipleTable"
      :data="arr"
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        background: '#eef1f5',
        color: '#333',
        fontWeight: '700',
      }"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column label="用户ID" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column prop="name" label="微信昵称" width="120" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="会员手机" width="120" align="center">
      </el-table-column>
      <el-table-column prop="pay" label="消费金额" width="120" align="center">
      </el-table-column>
      <el-table-column prop="num" label="订单数量" width="120" align="center">
      </el-table-column>
      <el-table-column prop="vip" label="会员等级" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="lastTime"
        label="上次消费时间"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="禁用账户" width="100" align="center">
        <template slot-scope="slot">
          <el-switch
            v-model="slot.row.n"
            active-color="#ff4949"
            inactive-color="#b5b5b5"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deleteId, batchDelete } from "../../../api/student"; //引进请求函数
import Bus from "../../../utils/bus"; //引入Bus通信
export default {
  props: ["arr"], //接收父组件传下来的数据
  data() {
    return {
      n: false,
      multipleSelection: [],
    };
  },
  mounted() {
    Bus.$on("batchdelete", this.batchDeleteTable); //绑定事件
  },
  beforeDestroy() {
    Bus.$off("batchdelete", this.batchDeleteTable); //解绑事件
  },
  methods: {
    handleEdit(row) {
      //编辑
      this.$emit("openDialog", row); //往父组件传递  把数据传进去
    },
    handleDelete(id) {
      //删除思路 发请求给后台  后台把数据删除 前端刷新页面
      console.log(id);
      deleteId({ id: id }).then((res) => {
        //前面id是属性 后面id是传的值
        console.log(res);
        if (res.code == 200) {
          this.$emit("resetparentFun"); //子组件调用父组件方法
        }
      });
    },
    batchDeleteTable() {
      //批量删除
      console.log("调用");
      let ids = "";
      if (this.multipleSelection.length > 0) {
        //判断数组中是否有元素
        this.multipleSelection.forEach((item) => {
          ids += item.id + ","; //获取的id都用，隔开
        });
        ids = ids.slice(0, ids.length - 1);
      }
      batchDelete({ ids: ids }).then((res) => {
        //批量数据传递  数组转字符串  用，分割
        console.log(res);
        if (res.code == 200) {
          this.$emit("resetparentFun"); //子组件调用父组件方法
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  box-sizing: border-box;
  width: 1220px;
  background-color: #fff;
  padding-left: 40px;
  position: relative;
  /deep/.s4 {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    margin: 18px 0 18px -10px;
  }
  /deep/.el-table__header-wrapper {
    background-color: #eef1f5;
  }
  .el-button--default {
    background-color: #438afe;
    color: #fff;
  }
  .el-button--danger {
    background-color: #b5b5b5;
    border-color: #b5b5b5;
  }
}
// /deep/.el-table{
//   overflow: visible !important;
//   .el-table__header-wrapper {
//       background-color: blueviolet;
//       thead th:first-child{
//         &.el-table__cell>.cell{
//           width: auto;
//         }
//         position: absolute;
//         background-color: white !important;
//         bottom:  -50px;
//         z-index: 5;
//         &::after{
//           content: '全选';
//         }
//       }
//   } 
// }
</style>
